<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>新组件系统测试</title>
        <script type="text/javascript" src="../../dist/avalon.js"></script>
    </head>
    <body>
        <div ms-controller='widget1' >
            <xmp ms-if='@bbb' ms-widget="{is:'ms-button',id:'ee'}" cached='true'>{{@aaa}}</xmp>
        </div>
        <h1>你会看到111,一会不见,一会又出现</h1>
        <script type="text/javascript">
avalon.component('ms-button', {
    template: '<button type="button" ><span><slot /></span></button>',
    defaults: {
        buttonText: "button",
        onViewChange: function(e){
            avalon.log(e.type)
        }
    },
    soleSlot: 'buttonText'
})
var vm = avalon.define({
    $id: 'widget1',
    aaa: 111,
    bbb: true
})
setTimeout(function () {
    vm.bbb = false
    setTimeout(function () {
        avalon.log('插入')
        vm.bbb = true
    }, 2000)
}, 2000)

        </script>
    </body>
</html>